import React, { Component } from 'react'
import axios from '../utils/request'
import '../App.css'
import {
    LeftOutlined,
} from '@ant-design/icons';
import { Checkbox } from 'react-vant';

// import { StepperTheme } from 'react-vant';

export default class Shop extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            result: [],
            is: false, //全选状态
            soum: 0,
            value: 1,
            data: 0,
            sum: 1
        }
    }

    componentDidMount() {
        this.getlist()
    }
    goback() {
        this.props.history.go(-1)
    }
    getlist() {
        axios({
            url: '/addlist',
            method: 'post',
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    del(id) {
        axios({
            url: '/delete',
            method: 'delete',
            data: { id: id }
        }).then(res => {
            this.getlist()
        })
    }

    addminus(sum, item) {
        item = {
            ...item,
            sum
        };
    }

    add(index) {
        //获取我们的index    
        let data = this.state.list
        data[index].sum++
        //自增1
        this.setState({ data: data })
    }

    reduce(index) {
        //获取我们的index    
        let data = this.state.list
        if (data[index].sum > 1) {
            data[index].sum--
        }
        //自增1
        this.setState({ data: data })
    }

    order(item) {
        axios({
            url: '/order',
            method: 'put',
            data: { item: item }
        }).then(res => {
            console.log(res);
            this.getlist()
        })
    }

    mask = () => {
        axios({
            url: '/alipay'
        }).then(res => {
            console.log(res.data);
        })
    }

    render() {
        const { list, is, soum } = this.state
        return (
            <div className='shop'>
                <div className='shop_header'>
                    <li onClick={() => this.goback()}><LeftOutlined /></li>
                    <li>购物车</li>
                    <li></li>
                </div>
                <div className='shop_main'>
                    <div className='shop_comm'>
                        {
                            list.length && list.map((item, index) => {
                                return <div className='comm_one' key={index}>
                                    <div className='one_shop'>
                                        <li><svg t="1634301711658" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1980" width="200" height="200"><path d="M511.082 36.049c-263.069 0-476.33 212.903-476.33 475.534s213.261 475.534 476.33 475.534c263.073 0 476.33-212.903 476.33-475.534 0-262.63-213.255-475.534-476.33-475.534zM772.988 397.6l-306.63 313.276c-14.106 14.413-36.99 14.413-51.094 0l-166.087-169.696c-14.115-14.414-14.115-37.788 0-52.206 14.105-14.419 36.99-14.419 51.094 0l140.541 143.585 281.072-287.169c14.115-14.418 37.001-14.418 51.105 0 14.115 14.417 14.115 37.792 0 52.21z" p-id="1981" data-spm-anchor-id="a313x.7781069.0.i0" className="selected" fill="#3ACF67"></path></svg></li>
                                        <li>天士力大药房</li>
                                    </div>
                                    <div className='two_shop'>
                                        <li>
                                            {/* <Radio name={item.id}></Radio> */}
                                            <Checkbox checked={item.is} iconSize={18} onChange={() => {
                                                item.is = !item.is
                                                if (!item.is) {
                                                    axios({
                                                        url: "/carIs",
                                                        method: 'post',
                                                        data: item
                                                    })
                                                    this.is = false
                                                } else { }
                                                let money = 0
                                                list.forEach(item => {
                                                    if (item.is === true) {
                                                        this.setState({
                                                            is: true,
                                                        })
                                                        money += item.skprice * item.sum
                                                        this.setState({
                                                            soum: money
                                                        })
                                                    } else {
                                                        this.setState({
                                                            is: false,
                                                            sum: 0
                                                        })
                                                    }
                                                })
                                            }}
                                            >
                                            </Checkbox>
                                        </li>
                                        <li><img src={item.sking} onClick={() => this.order(item)}></img></li>
                                        <li>
                                            <span>{item.skinge} {item.sktype}</span>
                                            <span>处方药</span>
                                            <span>￥{item.skprice}
                                            &emsp;
                                                <button onClick={this.reduce.bind(this, index)}>-</button>
                                                <input type="text" value={item.sum} onChange={() => this.sum()} />
                                                <button onClick={this.add.bind(this, index)}>+</button>&ensp;
                                                {/* <Stepper value={item.sum} onClick={() => this.addminus(item)} /> */}
                                                <svg t="1634302422837" className="icon" onClick={() => this.del(item.id)} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M358.925672 596.814688v30.450522c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.985526 31.233352-31.233352v-30.450522c0-17.248849-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.985526-31.233352 31.233352zM602.506317 596.814688v30.450522c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.985526 31.233351-31.233352v-30.450522c0-17.248849-13.984503-31.233352-31.233351-31.233352s-31.233352 13.985526-31.233352 31.233352zM437.047937 699.686636c-14.650675 9.104355-19.155269 28.360931-10.04989 43.01263 11.015891 17.73185 41.238216 47.740304 84.651982 47.740304 43.195801 0 73.79368-29.780257 85.059258-47.379077 9.216919-14.391778 5.03262-33.338293-9.237385-42.742477-14.270005-9.393951-33.576723-5.409197-43.159985 8.739035-0.12689 0.188288-13.049201 18.915815-32.661888 18.915815-19.028379 0-30.93864-17.274432-31.772634-18.530028-9.175987-14.412244-28.259624-18.788925-42.829458-9.756202zM907.576407 160.082952H699.352015v-26.882254c0-40.145325-32.692586-72.807213-72.878844-72.807213h-229.046626c-40.186258 0-72.878844 32.661887-72.878844 72.807213v26.882254H116.323309c-17.248849 0-31.233352 13.984503-31.233352 31.233352s13.984503 31.233352 31.233352 31.233351h791.253098c17.248849 0 31.233352-13.984503 31.233352-31.233351s-13.985526-31.233352-31.233352-31.233352z m-270.692119 0H387.014404v-26.882254c0-5.607718 4.768607-10.340509 10.411117-10.340509h229.046627c5.64251 0 10.411117 4.732791 10.411117 10.340509v26.882254z" p-id="9148" fill="#333333"></path><path d="M824.286446 259.279185c-17.248849 0-31.233352 13.984503-31.233352 31.233352v530.07261c0 40.089044-32.692586 72.705905-72.878844 72.705906H303.725466c-40.186258 0-72.878844-32.616862-72.878844-72.705906v-530.07261c0-17.248849-13.984503-31.233352-31.233352-31.233352s-31.233352 13.984503-31.233352 31.233352v530.07261c0 74.535577 60.71378 135.172609 135.345548 135.172609h416.448784c74.632791 0 135.345548-60.637032 135.345548-135.172609v-530.07261c0-17.248849-13.984503-31.233352-31.233352-31.233352z" p-id="9149" fill="#333333"></path><path d="M355.781052 259.279185c-17.248849 0-31.233352 13.984503-31.233351 31.233352v167.494758c0 17.248849 13.985526 31.233352 31.233351 31.233352 17.248849 0 31.233352-13.985526 31.233352-31.233352v-167.494758c0-17.248849-13.984503-31.233352-31.233352-31.233352zM699.352015 458.007295v-167.494758c0-17.248849-13.984503-31.233352-31.233351-31.233352s-31.233352 13.984503-31.233352 31.233352v167.494758c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.984503 31.233351-31.233352zM511.949858 489.240647c17.248849 0 31.233352-13.985526 31.233352-31.233352v-167.494758c0-17.248849-13.985526-31.233352-31.233352-31.233352s-31.233352 13.984503-31.233352 31.233352v167.494758c-0.001023 17.248849 13.984503 31.233352 31.233352 31.233352z" p-id="9150" fill="#333333"></path></svg> </span>
                                        </li>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
                <div className='shop_footer'>
                    &emsp;
                    <li> <Checkbox checked={is} onClick={() => {
                        if (is === false) {
                            this.setState({
                                is: true
                            })
                            list.forEach(item => {
                                item.is = true;
                                let money = 0;
                                money += item.skprice * item.sum
                                this.setState({
                                    soum: money
                                })
                            })
                        } else {
                            list.forEach(item => {
                                item.is = false
                                this.setState({
                                    soum: 0
                                })
                            })
                            this.setState({
                                is: false
                            })
                        }
                    }}></Checkbox>全选</li>
                    &emsp;&emsp;&emsp;
                    &emsp;&emsp;&emsp;
                    &emsp;&emsp;&emsp;
                    &emsp;&emsp;
                    <li>合计:<span>￥{soum}</span></li>
                    &emsp;
                    <li onClick={() => this.mask()}>咨询医生开药</li>
                </div>
            </div>
        )
    }
}
